<template>
  <div class="hexagon-svg-wrapper">
    <svg
      :width="width"
      :height="height"
      ref="svgRef"
      :viewBox="`-4 -4 208 208`"
      xmlns="http://www.w3.org/2000/svg"
      class="hexagon-svg"
    >
      <defs>
        <clipPath ref="clipPathRef" :id="id">
          <polygon ref="polygonRef" :points="points" />
        </clipPath>
      </defs>
      <rect
        :clip-path="`url(#${id})`"
        width="100%"
        height="100%"
        fill="#00003c"
      />
      <image
        :xlink:href="url"
        :clip-path="`url(#${id})`"
        width="100%"
        height="100%"
        style="background: red"
        preserveAspectRatio="xMidYMid slice"
      />
      <polygon
        ref="borderRef"
        :points="points"
        stroke="#fff"
        stroke-width="1"
        fill="none"
      />
      <polygon
        ref="border2Ref"
        :points="pointsBorder2"
        stroke="#fff"
        stroke-width="8"
        transform="translate(4, 4)"
        fill="none"
      />

      <g fill="none" :clip-path="`url(#${id})`">
        <rect
          x="0"
          y="158"
          width="100%"
          height="48"
          fill="rgba(5, 32, 77, 0.9)"
        />
        <text
          class="name"
          fill="#fff"
          x="48%"
          y="176"
          text-anchor="middle"
          v-html="name"
        ></text>
      </g>
    </svg>
  </div>
</template>

<script setup>
import { defineProps, toRefs, ref } from 'vue'
import { getPoints } from '@/utils'

const props = defineProps(['width', 'height', 'id', 'url', 'name', 'isCurrent'])

const { width, height, id, url, name, isCurrent } = toRefs(props)

const svgRef = ref(null)
const clipPathRef = ref(null)
const polygonRef = ref(null)
const borderRef = ref(null)
const border2Ref = ref(null)

const pointsBorder2 = ref(getPoints(192, 192))

const points = ref(getPoints())

console.log(isCurrent.value)
</script>

<style scoped lang="scss">
.hexagon-svg-wrapper {
  display: inline-block;
}
.hexagon-svg {
  .name {
    font-size: 9px;
    color: #ffffff;
    font-family: PingFangSC-Semibold;
    font-weight: normal;
    width: 100%;
    text-align: center;
  }
}
</style>